body{
  width: 570px;
  margin: 0 auto;
}
.b1{
  margin-bottom:20px ;
  width: 570px;
  height: 240px;
  background-color: aqua;
  overflow: hidden;

}
.a1{
  background-color: darkgray;
  width: 550px;
  margin: 5px 10px;
}
.s1{
  height: 50px;
}
.z1{
  height: 100px;
}
.x1{
  height: 50px;
}
.navigation{
  display: flex;
}

.z2{
  background-color: darkgray;
  width: 160px;
  height: 220px;
  margin: 5px 8px;
}
.y2{
  background-color: darkgray;
  width:360px ;
  height: 220px; 
  margin: 5px 8px;
}

.s3{
height: 50px;
}
.z3{
  width: 550px;
  margin: 5px 10px;
  height: 100px;
  display: flex;
}
.z3 div{
  width: 33.3%;
  height: 100px;
  background-color:darkgray;
  margin: 0 2px;
}

.x3{
  height: 50px;
}
.s4{
  height: 50px;
}
.z4{
  width: 550px;
  margin: 5px 10px;
  height: 100px;
  display: flex;
}
.z4>div:nth-child(1){
  width: 150px;
  height: 100%;
  background-color:darkgray;
  margin-right: 8px;
}
.z4>div:nth-child(2){
  width: 250px;
  height: 100%;
  background-color:darkgray;
  margin-right: 8px;
}
.z4>div:nth-child(3){
  width: 150px;
  height: 100%;
  background-color:darkgray;
}


.x4{
  height: 50px;
}

